<template>
  <div class="image-message no-select" @click="handlePreview">
    <el-image
      fit="cover"
      :src="url"
      :style="style"
      @error="srcerr(src)"
      style="display:block;border-radius: 0px"
    >
      <div slot="error" @click="reloadImg" class="image-slot">
        图片加载失败...
      </div>
      <div slot="placeholder" class="image-slot">图片加载中...</div>
    </el-image>
    <el-alert show-icon :closable="false" :title="src.title" type="success">
    </el-alert>
    <!-- 图文查看器 -->
    <MeEditorTextImagePreView
      ref="imageTextViewer"
      v-model="imageTextViewer.isShow"
      :file="imageTextViewer.file"
      :text="imageTextViewer.text"
    />
  </div>
</template>
<script>
import { imgBigZoom } from "@/utils/functions";
import MeEditorTextImagePreView from "@/components/editor/MeEditorTextImagePreView";
export default {
  name: "ImageMessage",
  components: { MeEditorTextImagePreView },
  props: {
    src: {
      type: Object,
      default() {
        return {
          url: "",
          title: ""
        };
      }
    }
  },
  data() {
    return {
      style: {
        width: "200px",
        height: "200px"
      },
      imageTextViewer: {
        isShow: false,
        file: null,
        text: ""
      },
      times: 0
    };
  },
  computed: {
    url() {
      this.getImgStyle(this.src.url + "?time=" + this.times);
      return this.src.url + "?time=" + this.times;
    }
  },
  methods: {
    async getImgStyle(url) {
      const res = await imgBigZoom(url, 200);
      this.style = res;
    },
    reloadImg() {
      this.times++;
    },
    srcerr() {
      this.times++;
      this.getImgStyle(this.src.url + "?time=" + this.times);
      this.$emit("imageLoad");
    },
    handlePreview() {
      this.imageTextViewer.isShow = true;
      this.imageTextViewer.file = this.src.url;
      this.imageTextViewer.text = this.src.title;
    }
  }
};
</script>
<style lang="less" scoped>
.image-message {
  background: rgba(247, 245, 245, 0.66);
  /deep/.el-image {
    border-radius: 5px;
    cursor: pointer;
    background: #f1efef;
    margin: 0 auto;
    .image-slot {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      font-size: 13px;
      color: #908686;
      background: #efeaea;
    }
  }
}
</style>
